@gray: #333;
@color: #fff;

@color1: #4482ff;
@color2: #49b0ff;
@color3: #7680ff;
@color4: #8a5cfd;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Fill{
    
    .items{
        text-align: left;
        color: @color;
        box-sizing: border-box;
        .px2rem(border-radius, 12);
        .px2rem(margin-top, 12);
        .px2rem(margin-bottom, 12);
        .px2rem(padding, 12);
        .px2rem(padding-top, 20);
        .px2rem(padding-bottom, 20);
        display: flex;
        background-color: @color1;
        &:nth-child(4n-2){
            background-color: @color2;
        }
        &:nth-child(4n-1){
            background-color: @color3;
        }
        &:nth-child(4n){
            background-color: @color4;
        }
        &.col-12{
            width: 47%;
            flex: 0 0 auto;
            float: left;
            &:nth-child(2n){
                float: right;
            }
        }
        .icon{
            .px2rem(padding-right, 8);
            .px2rem(font-size, 62);
            .px2rem(height, 62);
        }
        .inner{
            flex: 1;
            .num{
                font-weight: normal;
                .px2rem(font-size, 28);
                .px2rem(line-height, 36);
            }
            .text{
                .px2rem(font-size, 18);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
            }
        }
    }
}

